<template>
	<view>
		<view class="moivename">
			<view class="moivetop">{{main.cinemaName}}</view>
			<view class="moivebase">{{main.cinemaAddress}}</view>
			
		</view>
		
		<view class="moive_top">
			<view class="moiveleft">
				<image :src="main.filmImg" style="" mode=""></image>
			</view>
			<view class="moiveright">
				<view class="moiveright1">{{main.filmName}}</view>
				<view class="moiveright2">{{main.startTime |times}} | <text>{{main.language}}{{main.hallType}}</text></view>
				<view class="moiveright3">{{main.cinemaName}}</view>
				<view class="moiveright4">{{main.cinemaAddress}}</view>
				<view class="moiveright5">{{main.hallName}}</view>
				<view class="moiveright6">{{main.seatName}}</view>
			</view>
		</view>
		
		<view class="moivefile" v-if="main.ticketCode != null">
			<view class="moivefiletitle">取电影票</view>
			<view class="mbottom">
				<uqrcode  v-if="!dddimg" class="qsma" ref="uQRCode" :text="qrmain" />
				<image v-if="dddimg" style="width: 300upx;height: 300upx;" :src="dddimg"></image>
				<view class="moivefilecenter">
					<view class="moivefilecentertext">取票码：</view>
					<view class="moivefilecenternum">{{main.ticketCode}}</view>
				</view>
			</view>
			
		</view>
		
		<view class="moivecenter">
			<view class="moivecentertitle">订单详情</view>
			<view class="moivecenterprice">
				<view>实付金额:</view>
				<view style="margin-left: 20upx;"><text>￥</text>{{main.totalTicketPrice}}({{main.ticketNum}}张电影票)</view>
			</view>
			<view class="moivecenterphone">
				<view>手机号码:</view>
				<view style="margin-left: 20upx;">{{main.phone}}</view>
			</view>
			<view class="moivecenternum">
				<view>订单号码:</view>
				<view style="margin-left: 20upx;">{{main.orderNo}}</view>
			</view>
			<view class="moivecentertime">
				<view>订单时间:</view>
				<view style="margin-left: 20upx;">{{main.gmtCreate |times}}</view>
			</view>
		</view>
		
		<view class="moivebottom">
			<view class="bhead">观影须知</view>
			<view  class="bbottom">
				<u-parse :content="texts"></u-parse>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		filmorderdetailid
	} from '@/api/oil'
	export default {
		data() {
			return {
				dddimg:false,
				
				listma:'',
				qrmain: '',
				main:{},
				moiveimgurl: '../../static/tabsIcon/dianyingimg.jpg',
				texts:`	1.请提前半小时到达影院现场，通过影院自助取票机完成取票。<br/>
						2.若取票过程中遇到无法取票等其它问题，请联系影院工作人员进行处理。<br/>
						3.请及时关注电影开场时间，凭票有序检票入场。<br/>
						4.如需开具电影票发票，可联系影院工作人员凭当日票根进行开具，若遇到特殊情况请及时联系猫眼客服人员。<br/>
						5.退票、改签服务请参考影院具体政策要求，特殊场次及部分使用卡、券场次订单可能不支持此服务。<br/>
						`
			}
		},
		filters: {
			time(text) {
				let str = text.slice(0, 10)
				return str
			},
			times(value) {
				// let str = value * 1000
				let date = new Date(value);
				let y = date.getFullYear(); // 年
				let MM = date.getMonth() + 1; // 月
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate(); // 日
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours(); // 时
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes(); // 分
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds(); // 秒
				s = s < 10 ? ('0' + s) : s;
				// var timer =  y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				var timer = y + '年' + MM + '月' + d + '日';
				return timer;
			}
		},
		onLoad(option) {
			this.filmorderdetailid(option.id);
			// let is = "1483401332627959809"
		},
		methods: {
			filmorderdetailid(id){
				filmorderdetailid(id).then(res => {
					if(res.success == 1){
						this.main = res.data;
						if(res.data.ticketCode != null){
							this.qrmain = res.data.ticketCode;
							// this.qrmain = '111111';
							setTimeout(() => {
								this.toTempFilePath()
							}, 0)
						}
						
					}else{
						uni.showToast({
							title: res.message,
							icon:'none',
							duration: 2000
						});
					}
				})
			},
			
			toTempFilePath() {
				this.$nextTick(function() {
					this.$refs.uQRCode.toTempFilePath({
						complete: res => {
							console.log(res)
							this.dddimg = res.tempFilePath;
						}
					})
				})
			},
		}
	}
</script>
<style>
	page{
		background-color:#f4f4f4;
	}
</style>

<style lang="scss" scoped>
	
.moivename{
	margin-top: 20upx;
	width: 100%;
	margin-left: 20upx;
	margin-bottom: 20upx;
	.moivetop{
		font-size: 40upx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}
	.moivebase{
		font-size: 30upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		opacity: 1;
	}
}
.moive_top{
	width: 96%;
	margin:  0 auto;
	padding-bottom: 20upx;
	border-radius: 20upx 20upx 40upx 40upx;
	// height: 300upx;
	background-color: #FFFFFF;
	display: flex;
	.moiveleft{
		width: 30%;		
		image{
			margin-left: 20upx;
			margin-top: 40upx;
			width: 173upx;
			height: 244upx;
			border-radius: 20upx;
		}
	}
	.moiveright{
		width: 70%;
		.moiveright1{
			margin-top: 40upx;
			font-size: 30upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			opacity: 1;
		}
		.moiveright2{
			margin-top: 10upx;
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			opacity: 1;
		}
		.moiveright3{
			margin-top: 10upx;
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			opacity: 1;
		}
		.moiveright4{
			margin-top: 10upx;
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			opacity: 1;
		}
		.moiveright5{
			margin-top: 10upx;
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			opacity: 1;
		}
		.moiveright6{
			margin-top: 10upx;
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			opacity: 1;
		}
	}
}
.moivefile{
	background-color: #FFFFFF;
	width: 96%;
	margin:  0 auto;
	border-radius: 40upx 40upx 20upx 20upx;
	border-top: 1upx dotted #F4F4F4;
	.moivefiletitle{
		margin-left: 20upx;
		padding-top: 20upx;
		font-size: 40upx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}
	.mbottom{
		display: flex;
		flex-direction: column;
		align-items: center;
		.qsma{
		
		}
		.moivefilecenter{
			width: 100%;
			// align-items: center;
			// text-align: center;
			display: flex;
			justify-content: center;
			margin: 20upx 0;
			.moivefilecentertext{
				
			}
			.moivefilecenternum{
				
			}
		}
	}
	
	
}
.moivecenter{
	background-color: #FFFFFF;
	width: 96%;
	margin:  20upx auto;
	border-radius: 20upx;
	.moivecentertitle{
		padding-top: 20upx;
		margin-left: 20upx;
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #131313;
		letter-spacing: 2px;
		opacity: 1;
	}
	.moivecenterprice{
		display:flex;
		margin-left: 20upx;
		margin-top: 20upx;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #131313;
		opacity: 1;
	}
	.moivecenterphone{
		display:flex;
		margin-left: 20upx;
		margin-top: 20upx;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #131313;
		opacity: 1;
	}
	.moivecenternum{
		display:flex;
		margin-left: 20upx;
		margin-top: 20upx;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #131313;
		opacity: 1;
	}
	.moivecentertime{
		display:flex;
		margin-left: 20upx;
		margin-top: 20upx;
		padding-bottom: 20upx;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #131313;
		opacity: 1;
	}
}
.moivebottom{
	margin: 20upx;
	background-color: #FFFFFF;
	width: 96%;
	margin:  0 auto;
	border-radius: 20upx;
	.bhead{
		padding-top: 20upx;
		margin-left: 20upx;
		font-size: 36upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}
	.bbottom{
		margin-top: 20upx;
		width: 90%;
		margin: 0 auto;
		font-size: 30upx;
	}
}
</style>
